<template>
  <div class="home">
    <div class="commodities">
      <!-- 商品分类 -->
      <el-card class="box-card">
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/allgoods' }">全部商品</el-breadcrumb-item>
          <el-breadcrumb-item>搜索</el-breadcrumb-item>
          <el-breadcrumb-item>{{ type }}</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 商品类型 -->
        <div style="margin-top: 20px">
          <span class="fenlie">分类 </span>
          <el-radio-group v-model="radio" size="small" @change="radioChange">
            <el-radio-button :label="i" v-for="(i, l) in radiolist" :key="l"></el-radio-button>
          </el-radio-group>
        </div>
      </el-card>
      <el-row>
        <el-col style="margin-bottom: 20px;">
          <div style="margin: 0 20px;"></div>
        </el-col>
      </el-row>
      <!-- 该商品类型下的所有商品 -->
      <ul class="goodslist">
        <li class="li" v-for="item in commodities" :key="item.gid">
          <router-link :to="{ name: 'introduce', query: { commodityId: item.gid } }" class="card">
            <el-card :body-style="{ padding: '20px' }" shadow="hover">
              <img :src="item.pthumbnail" style="width: 200px;height:200px" />
              <div style="padding: 14px;">
                <span>{{ item.gname }}</span>
              </div>
              <div style="padding: 0 14px;">
                <span class="newPrice">￥{{ item.gprice }}</span>
                <span class="oldPrice">￥{{ item.gprice }}</span>
                <span class="commentCount">评价 {{ item.commentCount }}</span>
              </div>
            </el-card>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getGoodsList, nameForGoods } from '@/api/goods.js'
export default {
  name: 'AllGoods',
  data() {
    return {
      type: '',
      radiolist: [],
      radio: '',
      activeIndex: '1',
      activeIndex2: '1',
      query: '',
      carousels: [],
      // 商品数组
      commodities: [],
      types: [
        {
          buttonType: 'primary',
          goods_TypeName: '全部类型'
        }
      ]
    }
  },
  components: {},
  computed: {
    path: function() {
      return this.$router.path
    }
  },
  methods: {
    async radioChange(i) {
      this.type = i
      this.commodities = []
      const res = await nameForGoods({ name: this.radio })
      // console.log(res)
      if (res.data.code == '000') {
        this.commodities.push(res.data.data)
      } else {
        this.$message.warning(res.data.msg)
      }
    },
    async getGoodsList() {
      const res = await getGoodsList()
      console.log(res);
      const data = res.data.data
      // 分类
      data.forEach(element => {
        const num = Math.round(Math.random() * 10000)
        this.commodities.push({ ...element, commentCount: num })
        if (this.radiolist[0]) {
          if (!this.radiolist.some(item => item === element.gname)) {
            this.radiolist.push(element.gname)
          }
        } else {
          this.radiolist.push(element.gname)
        }
      })
      // console.log(this.commodities);
      // 轮播图
      for (let i = 0; i < 5; i++) {
        if (i == data.length) {
          break
        }
        this.carousels.push(data[i])
      }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    }
  },
  // 获取数据
  created() {
    this.getGoodsList()
  }
}
</script>

<style scoped lang="less">
.goodslist {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  .li {
    margin: 5px;
    list-style: none;
    width: 288px;
    flex: none;
  }
}
.fenlie {
  font-size: 14px;
  font-weight: 700;
  margin-right: 10px;
}
.imge {
  margin-top: 20px;
}
.grid-content {
  padding-top: 39px;
}
.grid-right {
  display: flex;
  padding-top: 39px;
  padding-left: 50px;
}
.elrow {
  background-color: #fff;
  margin-bottom: 20px;
  height: 100px;
  border-bottom: 1px solid #eee;
}
.form {
  text-align: center;
}

.input {
  width: 500px;
}

.carousel {
  width: 800px;
  margin: 0 auto;
}

.carousel img {
  width: 400px;
  height: 400px;
  /* 缩放 */
  object-fit: contain;
}

.commodities img {
  display: block;
  margin: 0 auto;
}

.card {
  text-decoration: none;
}

.newPrice {
  color: #f56c6c;
  font-size: 24px;
}

.oldPrice {
  color: #909399;
  text-decoration: line-through;
}

.commentCount {
  float: right;
  margin-top: 10px;
  color: #909399;
  font-size: 13px;
}

.el-button--text {
  color: black;
}
</style>
